<template>
  <div>
    <!-- 顶部搜索区域 -->
			<el-form :inline="true" :model="searchUser" class="demo-form-inline">
				<el-form-item label="用户名">
					<el-input v-model="searchUser.username" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item label="家庭住址">
					<el-input v-model="searchUser.useraddress" placeholder="家庭住址"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getUserInfoes()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" @click="addUserInfo()">新增</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="warning" @click="clearMsg()">清空</el-button>
				</el-form-item>
			</el-form>
			<!-- 表格数据显示区域 -->
			<template>
				<el-table ref="singleTable" :data="UserInfoes" highlight-current-row style="width: 100%">
					<el-table-column type="index" width="50">
					</el-table-column>
					<el-table-column property="username" label="用户名" width="150">
					</el-table-column>
					<el-table-column property="userpwd" label="密码" width="150">
					</el-table-column>
					<el-table-column property="usertel" label="联系方式" width="200">
					</el-table-column>
					<el-table-column property="useraddress" label="地址">
					</el-table-column>
					<el-table-column  label="用户头像">
						<template slot-scope="scope">
							<el-image :src="scope.row.imgsrc"></el-image>
						</template>		 
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="deleteUserInfo(scope.row.id)">删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页组件 -->
				<div class="block">
					<el-pagination 
					@size-change="handleSizeChange" 
					@current-change="handleCurrentChange"				
					:current-page="pageNum" 
					:page-sizes="[2, 3, 5, 10]" 
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" 
					:total="total">
					</el-pagination>
				</div>

			</template>
			<!-- 新增、编辑使用的dialog对话框 -->
			<el-dialog title="用户信息" :visible.sync="dialogFormVisible">
				<el-form :model="editUserInfo">
					<el-form-item label="用户名" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.username" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="密码" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.userpwd" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.useraddress" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系方式" :label-width="formLabelWidth">
						<el-input v-model="editUserInfo.usertel" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="用户头像" :label-width="formLabelWidth">
						<el-upload
						class="avatar-uploader"
						action="#"
						:show-file-list="false"
						:http-request="imgUpload"
						:before-upload="beforeAvatarUpload">
						<img v-if="editUserInfo.imgsrc" :src="editUserInfo.imgsrc" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>

					</el-form-item>
					
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="saveUserInfo()">确 定</el-button>
				</div>
			</el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs';
export default {
  name: 'Home',
  components: {
    
  },
  data(){
    return{
      searchUser: {
					username: "",
					useraddress: ""
				},
				// 保存表格中的数据
				UserInfoes: [],
				currentRow: null,
				// 控制dialog框显示隐藏
				dialogFormVisible: false,
				editUserInfo: {
					id: null,
					username: "",
					userpwd: "",
					usertel: "",
					useraddress: "",
					imgsrc:""
					
				},
				formLabelWidth: '120px',
				// 与分页相关的变量
				pageNum:1,
				pageSize:5,
				total:0
    }
  },
  methods:{
    getUserInfoes: function(currentPage,currentSize) {
					if(!currentPage){
						currentPage=this.pageNum
					}
					if(!currentSize){
						currentSize=this.pageSize
					}
					// 将请求参数序列化处理
					var param = Qs.stringify(this.searchUser,{encode:false})
                    console.log(param)

					// 拼接分页的参数信息
					param+="&pageNum="+currentPage+"&pageSize="+currentSize	
					console.log(param)
					// 在axios发起请求后，this指向的对象有所变化
					// 在请求前指向vue实例，请求后指向window
					// 所以要想访问请求前的this，可以将this先保存起来
					var that = this
					axios.post('http://localhost:8086/selectUserInfoesByPage', param)
						.then(function(response) {						
							console.log(response)
							that.UserInfoes = response.data.records
							that.pageNum=response.data.current
							that.pageSize=response.data.size
							that.total=response.data.total

						})
						.catch(function(error) {
							console.log(error);
						});
				},

				handleEdit(row) {
					// 对dialog框中的数据进行赋值，获取当前行的数据赋值给dialog框
					this.editUserInfo = row
					// 将dialog框进行弹出
					this.dialogFormVisible = true

				},
				deleteUserInfo(userId) {
					console.log(userId);
					var param = "id=" + userId + "&isdelete=1"
					var that = this
					console.log(param)
					// 删除确认
					this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.post('http://localhost:8086/editUserInfo', param)
							.then(function(response) {
								if (response.data == 1) {

									// 调用查询更新数据
									that.getUserInfoes()
								}
							})
							.catch(function(error) {
								console.log(error);
							});
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});


				},
				addUserInfo: function() {
					this.editUserInfo = {}
					this.dialogFormVisible = true
				},
				saveUserInfo: function() {
					var param = Qs.stringify(this.editUserInfo)
					var that = this
					axios.post('http://localhost:8086/editUserInfo', param)
						.then(function(response) {
							if (response.data == 1) {
								// 关闭dialog框
								that.dialogFormVisible = false
								// 调用查询更新数据
								that.getUserInfoes()

							}


						})
						.catch(function(error) {
							console.log(error);
						});

				},
				// 与分页相关的方法
				handleSizeChange(val) {
					// 重新调用查询操作，将分页信息进行替换
				    this.getUserInfoes(this.pageNum,val)
				},
				handleCurrentChange(val) {
				    this.getUserInfoes(val,this.pageSize)
				},
				// 搜索框清空
				clearMsg:function(){
					this.searchUser={}
					this.getUserInfoes()
					
				},
				imgUpload(param){
					var that=this
					var formData = new FormData()
					formData.append('image', param.file);
					axios.post('http://localhost:8086/upload', formData).then(function (res) {
						console.log(res);
						that.editUserInfo.imgsrc=res.data
						// console.log(that.eidtUserInfoBean)
						that.$forceUpdate()
						
					});
				

				},
				beforeAvatarUpload(){

				}

			
  },
   mounted() {
				this.getUserInfoes()
			}
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
